<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <script href="/js/jquery.js"></script>
    <script href="/js/echarts.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
    <div id="main" style="width: 1200px;height: 500px;">
        <script type="text/javascript">
            alert("准备初始化echarts实例");
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            $.ajax({
                type: "get",
                async: true,
                url: "/bigdataPro/stuEcharts6",
                dataType: "json",
                success: function (data) {
                    if (data.code == 'success'){
                        // 直接使用data变量，不需要eval
                        console.log(data); // 在控制台打印数据以检验是否传输成功

                        option = {
                            color: ["#A7ABFF"],
                            title: {
                                text: '各班男女人数',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'axis' // 触发提示框
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            xAxis: [
                                {
                                    name: '班级',
                                    type: 'category',
                                    data: data.items.map(function(item) { // 使用map迭代items数组获取name
                                        return item.name;
                                    })
                                }
                            ],
                            yAxis: [
                                {
                                    name: '人数',
                                    type: 'value',
                                    position: 'left' // 女生y轴在左侧
                                },
                                {

                                    type: 'value',
                                    position: 'right' // 男生y轴在右侧
                                }
                            ],
                            series: [  {
                                name: '女生', // 数据名称
                                type: 'bar', // 图表类型为柱状图
                                // 关联到左侧的y轴
                                data: data.items.map(function(item) {
                                    return item.num1; // 假设num1是女生人数
                                })
                            },
                                {
                                    name: '男生', // 数据名称
                                    type: 'bar', // 图表类型为柱状图
                                    yAxisIndex: 1, // 关联到右侧的y轴
                                    itemStyle: {color: 'blue'},
                                    // 注意：确保数据的堆叠设置符合你的需求（如果需要堆叠的话）
                                    stack: 'total', // 例如，如果你想堆叠男生和女生的数据
                                    data: data.items.map(function(item) {
                                        return item.num2; // 假设num2是男生人数
                                    })
                                }  ]
                        };

                        // 使用配置项和数据显示图表
                        myChart.setOption(option);
                    } else {
                        // 处理错误情况
                        console.error('请求失败:', data.msg);
                    }
                },
                error: function(xhr, status, error) {
                    // 处理AJAX请求错误
                    console.error('AJAX请求失败:', status, error);
                }
            });
        </script>
    </div>
</div>
</body>
</html>
